<template>
  <div class="table-box">
    <KingTable ref="kingTable" :tableOptions="_tableOptions" :request-api="queryTableData">
      <!-- 表格操作 -->
      <template #operation="scope">
        <el-button
          v-permissions="{ permission: ['forceLogout:OnlineList'] }"
          size="small"
          type="primary"
          @click="handleForceLogout(scope.row)"
        >
          强退
        </el-button>
      </template>
    </KingTable>
    <detail ref="detailRef" />
  </div>
</template>

<script setup lang="tsx" name="OnlineList">
import { ref, reactive } from "vue";
import { User } from "@/api/interface";
import KingTable from "@/components/KingTable/index.vue";
import { KingTableInstance, TableColumnProps, SearchColumnProps } from "@/components/KingTable/interface";
import http from "@/api";
import { postRequest } from "@/api/mains";
import { succMsg, confirm } from "@/utils/MessageUtils";

// 获取 KingTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const kingTable = ref<KingTableInstance>();
const detailRef = ref();

// 如果表格需要初始化请求参数，直接定义传给 KingTable(之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
const _initParam = reactive({ EQ_ss: 1 });

// 如果你想在请求之前对当前请求参数做一些操作，可以自定义如下函数：params 为当前所有的请求参数（包括分页），最后返回请求列表接口
// 默认不做操作就直接在 KingTable 组件上绑定	:requestApi="getUserList"
const queryTableData = (params: any) => {
  let newParams = JSON.parse(JSON.stringify(params));
  newParams.createTime && (newParams.GTE_loginTs = newParams.createTime[0]);
  newParams.createTime && (newParams.LTE_loginTs = newParams.createTime[1]);
  delete newParams.createTime;
  return http.post("monitor/online/query", newParams);
};

// 表格配置项
const _tableCols: TableColumnProps<User.ResUserList>[] = [
  // { type: "selection", fixed: "left", align: "center", width: 60 },
  { type: "index", label: "序号", align: "center", width: 60 },
  {
    prop: "tokenId",
    label: "会话编号",
    width: 300
  },
  {
    prop: "userName",
    label: "登录名称",
    width: 180,
    overflow: true
  },
  {
    prop: "orgName",
    label: "所属机构",
    width: 120
  },
  { prop: "ipaddr", label: "主机", width: 120 },
  { prop: "os", label: "操作系统", width: 100 },
  { prop: "browser", label: "浏览器", width: 180, overflow: true },
  {
    prop: "loginTs",
    label: "登录时间",
    width: 180
  },
  { prop: "operation", label: "操作", fixed: "right", width: 120 }
];

const _searchCols: SearchColumnProps<User.ResUserList>[] = [
  {
    prop: "LIKE_ipaddr",
    label: "登录地址",
    width: 100,
    el: "input"
  },
  {
    prop: "LIKE_userName",
    label: "登录名称",
    width: 100,
    el: "input"
  },
  {
    prop: "loginTs",
    label: "登录时间",
    width: 180,
    render: (scope: any) => {
      return (
        <el-date-picker
          model-value={scope.modelValue}
          type="datetimerange"
          range-separator="-"
          start-placeholder="请选择开始时间"
          end-placeholder="请选择结束时间"
          format="YYYY-MM-DD HH:mm:ss"
          value-format="YYYY-MM-DD HH:mm:ss"
        />
      );
    }
  }
];

const _tableOptions = {
  title: "操作日志",
  tableColumns: _tableCols,
  searchColumns: _searchCols,
  initParam: _initParam,
  doBeforeQuery: (beforeParams: any) => {
    //请求前处理参数
    if (beforeParams.loginTs) {
      beforeParams.GTE_loginTs = beforeParams.loginTs[0];
      beforeParams.LTE_loginTs = beforeParams.loginTs[1];
      delete beforeParams.loginTs;
    }
    return beforeParams;
  }
};

/**
 * 增删查按钮执行的业务操作
 * @param {*} type 当前执行操作的类型
 * @param {*} row
 */
const handleForceLogout = (row: any) => {
  confirm(`是否确认强退名称为"${row.userName}"的用户?`, async function () {
    const res: any = await postRequest(`monitor/online/${row.tokenId}`, {});
    if (res.code == 200) {
      succMsg(res.msg);
      kingTable.value?.getTableList();
    }
  });
};
</script>
